<template>
  <div class="resource-List" v-show="isShowResourceList(item)">
    <div class="resource-List-item" v-for="it in resourceList" :key="it.name" @click.prevent="goPop(it)">
      <img class="icon" src="@/assets/largescreen/ziyuan-item-left.svg" alt="" />
      <div class="name" :title="it.name">
        <!-- <span v-show="it.level_three && it.level_two !== '医院'">【{{ it.level_three }}】</span> -->
        <span>{{ it.name }}</span>
      </div>
      <span
        >距离<span class="value">{{ it.distance_meter || 0 }}</span
        >m</span
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
interface ResourceItem {
  name: string;
  distance_meter?: number;
  level_three?: string;
  level_two?: string;
}

const { item, resourceList, currentName } = defineProps<{
  item: Record<string, any>;
  resourceList: ResourceItem[];
  currentName: string;
}>();
const emit = defineEmits(['goPop']);
const isShowResourceList = (a) => {
  return !!a[currentName];
};
const goPop = (item) => {
  emit('goPop', item);
};
</script>

<style lang="scss" scoped>
.resource-List {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 300px;
  justify-content: space-around;

  .resource-List-item {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, rgba(69, 129, 247, 0.4) 0%, rgba(69, 129, 247, 0.1) 100%);
    position: relative;

    .name {
      width: 70%;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏超出容器的部分 */
      text-overflow: ellipsis;
      /* 显示省略号来表示被截断的文本 */
      text-align: left;
    }

    .icon {
      position: absolute;
      left: -1px;
    }

    .value {
      font-size: 18px;
      color: #fff;
      margin: 0 5px;
      font-weight: 700;

      :nth-child(1) {
        color: #dbf2fd;
      }

      :nth-child(2) {
        color: #fff;
      }
    }
  }
}
</style>
